{
    /**
     *  1. 封装格式化时间函数，
     *      支持 Date 和 string 格式的时间，
     *      可选参数，转换成功 10:10:10 时分秒
     *      优化补充 补0 字符串方法padStart-往前补0
        2. 定义访问记录单项 对象 类型，定义访问记录 列表 类型，
            需要存储在本地的 key 字面量类型
        3. 封装获取访问历史记录函数，返回类型是 记录列表
            从本地取数据
        4. 封装修改访问历史记录函数
            设置本地数据
        5. 封装一个展示访问历史记录函数，且调用
     */


    /**
     * 格式化时间 
    */
    function formatDate(date?: string | Date) {
        // 类型守卫 没有传date 转成Date对象，当前时间new Date()
        if (!date) date = new Date()
        // 类型守卫 如果传入的是字符串 也要转成Date对象
        if (typeof date === 'string') date = new Date(date)
        const h = date.getHours().toString().padStart(2, '0')
        const m = date.getMinutes().toString().padStart(2, '0')
        const s = date.getSeconds().toString().padStart(2, '0')
        return `${h}:${m}:${s}`
    }
    // console.log(formatDate()) // 不传参数 直接调用 返回当前的时间
    // console.log(formatDate('2023-05-20 01:01:00')) // 传字符串
    // console.log(formatDate(new Date('2023-05-20 15:55:00'))) // 传date对象

    // Data代表一条记录 每一行的数据
    type Data = {
        count: number
        time: string
    }
    // 列表类型 每一项是Data  对象数组类型
    type List = Data[] 
    const key = 'vue3-ts-base-107' // 本地存储用的

    function getData (){
        const listStr = localStorage.getItem(key)
        return JSON.parse(listStr || '[]') as List
    }
    // const list = getData()
    // console.log(list);
    function updateData () {
        // 1. 获取本地的数据 是个数组 即使没有记录也是个空数组
        const list = getData()
        // 2. 添加新数据
        list.push({
            count: list.length + 1, // 记录次数，新的次数就是当前数组的长度+1
            time: formatDate()
        }) 
        // 3. 最新的数据存到本地 
        localStorage.setItem(key, JSON.stringify(list))
    }
    // updateData()
    // 渲染页面
    function render () {
        // 1. 更新数据
        updateData()
        // 2. 取数据
        const list = getData()
        // 3. 渲染页面 #app 
        // 类型断言 确定appEl这个元素类型
        const appEl = document.querySelector('#app') as HTMLDivElement
        // 数组转成字符串 [{count: xxx, time:xx}] => 访问次数: count, 访问时间:xxx
        appEl.innerHTML = list.map(item => `访问次数：${item.count}, 访问时间：${item.time}`).join('<br/>')
    }
    render()
}


export { }
